{% extends 'uc_base.html' %}
{% block load_css %}
{#    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">#}
    <link rel="stylesheet" href="/static/avator/css/amazeui.min.css">
    <link rel="stylesheet" href="/static/avator/css/amazeui.cropper.css">
    <link rel="stylesheet" href="/static/avator/css/custom_up_img.css">
    <style type="text/css">
        .up-img-cover {width: 100px;height: 100px;}
        .up-img-cover img{width: 100%;}
    </style>
{% endblock %}

{% block load_js %}
    <script src="/static/avator/js/amazeui.min.js" charset="utf-8"></script>
    <script src="/static/avator/js/cropper.min.js" charset="utf-8"></script>
    <script src="/static/js/custom.js" charset="utf-8"></script>
    <script src="/static/avator/js/custom_up_img.js" charset="utf-8"></script>
{% endblock %}
{% block uc_content %}
  <div class="col-lg-12">
      <div class="panel">
          <div class="panel-body">
              <h4>个人信息</h4>
              <hr/>
              <div class="row">
                  <div class="col-md-3">
                    <div class="up-img-cover"  id="up-img-touch" >
                        <img class="am-circle" alt="点击图片上传" src="{{ user.avator_sor.url }}" data-am-popover="{content: '点击上传', trigger: 'hover focus'}" >
                    </div>
                    <div><a style="text-align: center; display: block;"  id="pic"></a></div>
                  </div>
                  <div class="col-md-6">
                  <form class="form-horizontal" role="form" method="post">
                     {% csrf_token %}
                      <div class="form-group">
                          <label for="inputEmail" class="col-lg-3 control-label">邮箱</label>
                          <div class="col-lg-9">
                              <input name="email" type="email" class="form-control" id="inputEmail" value="{{ user.email }}"  required>
                          </div>
                      </div>
                      <div class="form-group">
                          <label for="inputRealName" class="col-lg-3 control-label">真实姓名</label>
                          <div class="col-lg-9">
                              <input name="realname" type="text" class="form-control" id="inputRealName" value="{{ user.realname }}"  required>
                          </div>
                      </div>
                      <div class="form-group">
                          <label for="inputTel" class="col-lg-3 control-label">手机号</label>
                          <div class="col-lg-9">
                              <input name="mobile" type="tel" class="form-control" id="inputTel" value="{{ user.mobile }}"  required>
                          </div>
                      </div>
                      <div class="form-group">
                          <label for="inputQQ" class="col-lg-3 control-label">QQ</label>
                          <div class="col-lg-9">
                              <input name="qq" type="text" class="form-control" id="inputQQ" value="{{ user.qq }}"  minlength="5" required>
                          </div>
                      </div>
                      <div class="form-group">
                          <div class="col-lg-offset-3 col-lg-9">
                              <button type="submit" class="btn btn-danger">提交</button>
                          </div>
                      </div>
                 </form>
                  </div>
              </div>
          </div>
      </div>
  </div>




<!--图片上传框-->
<div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
  <div class="am-modal-dialog up-frame-parent up-frame-radius">
    <div class="am-modal-hd up-frame-header">
       <label>修改头像</label>
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd  up-frame-body">
      <div class="am-g am-fl">
        <div class="am-form-group am-form-file">
          <div class="am-fl">
            <button type="button" class="am-btn am-btn-default am-btn-sm">
              <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
          </div>
          <input type="file" id="inputImage">
        </div>
      </div>
      <div class="am-g am-fl" >
        <div class="up-pre-before up-frame-radius">
            <img alt="" src="" id="image" >
        </div>
        <div class="up-pre-after up-frame-radius">
        </div>
      </div>
      <div class="am-g am-fl">
        <div class="up-control-btns">
            <span class="am-icon-rotate-left"  onclick="rotateimgleft()"></span>
            <span class="am-icon-rotate-right" onClick="rotateimgright()"></span>
            <span class="am-icon-check" id="up-btn-ok" url="{% url 'apis:change_avator' %}"></span>
        </div>
      </div>

    </div>
  </div>
</div>

<!--加载框-->
<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">正在上传...</div>
    <div class="am-modal-bd">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div>

<!--警告框-->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">信息</div>
    <div class="am-modal-bd"  id="alert_content">
          成功了
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>
{% endblock %}